$(function() {
	(function() {
		var imgWhole, imgPart,
			upNum = [false, false];

		$('.de-fn').on('click', 'button', function(event) {
			if (this.className.indexOf('de-whole') !== -1) {
				$('#de-whole').trigger('click');
			} else {
				$('#de-part').trigger('click');
			}
		});

		//读取文件并预览
		$('#de-whole').on('change', function(event) {
			var file = event.target.files[0];
			if (!!file) {
				var fileReader = new FileReader();
				fileReader.onload = function(e) {
					var $show = $('.de-show:eq(0)'),
						deNum = 2;
					imgWhole = e.target.result;
					$show.find('img').remove()
						.end().find('.de-placehold').hide();
					$('<img/>').attr('src', imgWhole).addClass('de-img img-thumbnail')
						.appendTo($show);
					upNum[1] = true;
					upNum.forEach(function(el, index) {
						if (el === true) deNum--;
					});
					if (deNum === 0) {
						$('.de-num').hide('fast');
						$('.de-save').prop('disabled', '');
					} else {
						$('.de-num span').text(deNum);
					}
				};

				fileReader.readAsDataURL(file);
			}
		});

		$('#de-part').on('change', function(event) {
			var file = event.target.files[0];
			if (!!file) {
				var fileReader = new FileReader();
				fileReader.onload = function(e) {
					var $show = $('.de-show:eq(1)'),
						deNum = 2;
					imgPart = e.target.result;
					$show.find('img').remove()
						.end().find('.de-placehold').hide();
					$('<img/>').attr('src', imgPart).addClass('de-img img-thumbnail')
						.appendTo($show);
					upNum[0] = true;
					upNum.forEach(function(el, index) {
						if (el === true) deNum--;
					});
					if (deNum === 0) {
						$('.de-num').hide('fast');
						$('.de-save').prop('disabled', '');
					} else {
						$('.de-num span').text(deNum);
					}
				};

				fileReader.readAsDataURL(file);
			}
		});

		//点击“确定上传”按钮，弹出描述框
		$('.de-save').on('click', function(event) {
			var img = new Image(),
				canvas, context,
				wrapCanvas = [{
					"id": "cv-whole",
					"src": imgWhole
				}, {
					"id": "cv-part",
					"src": imgPart
				}];
			wrapCanvas.forEach(function(el, index) {
				canvas = document.getElementById(el.id);
				context = canvas.getContext('2d');
				img.src = el.src;
				realWidth = img.height >= img.width *1.5 ? img.width : Math.floor(img.height / 1.5);
				context.drawImage(img, 0, 0, img.width, img.width * 1.5);
			});

			$('#zhezhao').show();
			$('.add-desc').show();
		});

		//点击“大功告成按钮”，上传到服务器
		$('.ds-finish').on('click', function (event) {
            event.preventDefault();
            var t = document.getElementById('ds-sort');
            var desc = $('.ds-desc').val(),
                head = document.getElementById('ds-head').value,
                sort = t.value;
            imgWhole = document.getElementById('cv-whole').toDataURL('image/png').substr(22);
            imgPart = document.getElementById('cv-part').toDataURL('image/png').substr(22);

            //canvas导出图片并上传到服务器和保存到用户本地(以打开新链接的方式)
			$.ajax({
					//服务器处理程序
					url: 'test_data/designUp.json',
					type: 'POST',
					dataType: 'json',
					data: {
						'whole': imgWhole,
						'part': imgPart,
						'sort': sort,
						'content': desc,
						'title': head
					}
				})
				.done(function(data) {
					if (data.statu == 1) {
						$('.submit-bar').hide('fast');
						$('.submit-clear').show('fast');
					} else {
						$('.submit-fail').show('fast');
					}
				})
				.fail(function(data) {
					console.log("de error");
					$('.submit-bar').hide('fast');
					$('.submit-fail').show('fast');
				})
				.always(function() {
					console.log("de complete");
				});
		});

		$(document).ajaxSend(function(e, xhr, setting) {
			if (setting.url == 'test_data/designUp.json') {
				$('.add-desc').hide('fast');
				$('.submit-bar').show('fast');	
			}
		});

		$('.ds-cancel').on('click', function(event) {
			$('.add-desc').hide();
			$('#zhezhao').hide();
		});

		//上传失败按钮
		$('.de-fail').on('click', function(){
			$('.ds-finish').trigger('click');
		});
	})();
});